import React, {Component} from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';
import routes from '@/routes/config'



export class SiderMenu extends Component{
    renderMenuItem = item => (
        <Menu.Item key={item.name}>
            <Link to={(item.path || item.name)}>
                {item.icon && <Icon type={item.icon} />}
                <span>{item.title}</span>
            </Link>
        </Menu.Item>
    );
    
    renderSubMenu = item => (
        <Menu.SubMenu key={item.name} 
            title={
                <span>{item.icon && <Icon type={item.icon} />}
                    <span>{item.title}</span>
                </span>
            }
        >
            {item.sub.map(item => this.renderMenuItem(item))}
        </Menu.SubMenu>
    );

    render(){
        return(
            <Menu {...this.props}>
                {routes && routes.map(item => 
                    item.children?this.renderSubMenu(item):this.renderMenuItem(item)
                )}
            </Menu>
        )
    }
}

export default SiderMenu